<div class="demand-principal">
  <h2 class="title text-center pt-3 pb-3 text-littleGray">安全管理负责/管理人员复审名单</h2>
  <div class="header pt-2 pb-2">
<!--    <div class="ui-inputgroup">-->
<!--      <input type="text" pInputText placeholder="搜索"/>-->
<!--      <button pButton type="button" icon="pi pi-search" class="ui-button-warn"></button>-->
<!--    </div>-->
    <button
      pButton
      label="{{'提前【'+principalSpecialDay?.values+'】天提醒（点击可修改）'}}"
      class="ui-button-danger"
      (click)="principalSpecialDayModal=true"
    ></button>
    <div class="button">
      <p-dropdown
        placeholder="选择导出复审人员名单"
        [options]="reviewDropdownOptions"
        (onChange)="principalOperate('export', $event)"
        dropdownIcon="fa fa-caret-down">
      </p-dropdown>
    </div>
  </div>
  <div class="content">
    <p-table
      [value]="principalTableData" [columns]="principalTableHeader"
      [scrollable]="true" scrollHeight="90%"
    >
      <ng-template pTemplate="header" let-columns>
        <tr>
          <th class="text-center">序号</th>
          <th *ngFor="let col of columns" class="text-center">
            {{col.header}}
          </th>
          <th class="text-center">操作</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
        <tr>
          <td class="text-center">{{rowIndex}}</td>
          <td *ngFor="let col of columns" class="text-center">
            {{rowData[col.field]}}
          </td>
          <td class="text-center">
            <button pButton label="完成复审" class="ui-button-rounded m-1" (click)="principalOperate(principalOperateFlag='review',rowData)" *ngIf="rowData.completionStatus === 1"></button>
            <button pButton label="取消" class="ui-button-rounded ui-button-pink" (click)="principalOperate(principalOperateFlag='cancle',rowData)" *ngIf="rowData['completionStatus'] === 1"></button>
            <button pButton label="已操作完成" class="ui-button-rounded ui-button-white" disabled *ngIf="(rowData.completionStatus !== 1)"></button>
          </td>
        </tr>
      </ng-template>
    </p-table>
  </div>
  <div class="pagination">
    <app-pagination [option]="principalPageOption" (clickEvent)="principalPageEvent($event)"></app-pagination>
  </div>
  <div class="modal">
    <!--角色新增/编辑弹窗-->
    <p-dialog
      [blockScroll]="true"
      [(visible)]="principalOperateModal" [style]="{width: '50vw'}"
    >
      <p-header>{{principalOperateFlag === 'review' ? '复审' : '取消'}}</p-header>
      <div style="width: 100%;">
        <div class="ui-g ui-md" *ngIf="principalOperateFlag === 'review'">
          <div class="ui-g-10 ui-md-10">
            <label class="ui-g-4 ui-md-4 label">
              <span>培训时间1：</span>
            </label>
            <div class="ui-g-8 ui-md-8 input">
              <p-calendar selectionMode="range" [readonlyInput]="true" [(ngModel)]="reviewPrincipoal.oneTrainingTime" dateFormat="yy-mm-dd"  yearRange="1990:2200" [locale]="esDate"  [readonlyInput]="true" [disabled]="reviewPrincipoalCopy.oneTrainingTime"></p-calendar>
            </div>
          </div>
          <div class="ui-g-10 ui-md-10">
            <label class="ui-g-4 ui-md-4 label">
              <span>培训时间2：</span>
            </label>
            <div class="ui-g-8 ui-md-8 input">
              <p-calendar selectionMode="range" [readonlyInput]="true" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="1990:2200" [locale]="esDate"  [readonlyInput]="true" [(ngModel)]="reviewPrincipoal.twoTrainingTime" [disabled]="reviewPrincipoalCopy.twoTrainingTime || !reviewPrincipoalCopy.oneTrainingTime"></p-calendar>
            </div>
          </div>
          <div class="ui-g-10 ui-md-10">
            <label class="ui-g-4 ui-md-4 label">
              <span>培训时间3：</span>
            </label>
            <div class="ui-g-8 ui-md-8 input">
              <p-calendar selectionMode="range" [readonlyInput]="true" [(ngModel)]="reviewPrincipoal.threeTrainingTime" dateFormat="yy-mm-dd"  yearRange="1990:2200" [locale]="esDate"  [readonlyInput]="true" [disabled]="reviewPrincipoalCopy.threeTrainingTime || !reviewPrincipoalCopy.twoTrainingTime"></p-calendar>
            </div>
          </div>
        </div>
        <div class="ui-g ui-md" *ngIf="principalOperateFlag !== 'review'">
          <div class="ui-g-10 ui-md-10">
            <div class="ui-g-4 ui-md-4 label">
              <span>取消备注：</span>
            </div>
            <div class="ui-g-8 ui-md-8 input">
              <textarea [rows]="5" [cols]="30" pInputTextarea autoResize="autoResize" [(ngModel)]="canclePrincipoal.reasonForHandling"></textarea>
            </div>
          </div>
        </div>
      </div>
      <p-footer>
        <button pButton label="确认" (click)="principalSureOperate(principalOperateFlag)"></button>
        <button pButton label="取消" class="ui-button-pink" (click)="principalOperateModal = false"></button>
      </p-footer>
    </p-dialog>
    <!-- 提前通知修改模态框 -->
    <p-dialog
      [modal]="true"
      [blockScroll]="true"
      [(visible)]="principalSpecialDayModal" [style]="{width: '50vw'}"
    >
      <p-header>修改提前通知时间</p-header>
      <div class="ui-g">
        <!--身份证-->
        <div class="ui-g-12 ui-md-12">
          <label class="ui-g-4 ui-md-4 label">
            <span>请输入时间(<span class="text-danger">只能是正整数</span>)：</span>
          </label>
          <div class="ui-g-8 ui-md-8 input">
            <input
              type="number" pInputText placeholder="请输入正整数"
              [(ngModel)]="principalSpecialDay.values"
            >
          </div>
        </div>
      </div>
      <p-footer>
        <button pButton label="确定" (click)="principalOperate(principalOperateFlag = 'special')"></button>
        <button pButton label="取消" class="ui-button-pink" (click)="principalSpecialDayModal = false"></button>
      </p-footer>
    </p-dialog>
  </div>
</div>

